<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/vue.js"></script>
</head>
<body>

    <div id="app">
<!--        模拟一个很复杂的页面结构-->
        <button style="color: red;font-size: 30px;width: 168px;height: 84px">按钮1</button>
        <button style="color: red;font-size: 30px;width: 168px;height: 84px">按钮2</button>
        <button style="color: red;font-size: 30px;width: 168px;height: 84px">按钮3</button>
        <hr>

        <cdm-btn></cdm-btn>
        <cdm-btn>按钮1</cdm-btn>
        <cdm-btn>按钮2</cdm-btn>
        <cdm-btn>按钮3</cdm-btn>

        <cdm-ol :listdata="lis"></cdm-ol>

        <hr>

        <cdm-input @valchange="valCha"></cdm-input>
        <button @click="get">获取子组件中input的内容</button>
    </div>

</body>
<script>

<!--    vue的自定义组件：将一段重复结构的标签，进行封装，形成一个新的标签，实现重复性结构的复用-->
    Vue.component("cdm-btn",{
        template:"<button style=\"color: red;font-size: 30px;width: 168px;height: 84px\"><slot>按钮</slot></button>"
    });


    //在使用组件时，需要给这个组件设置值，这个操作称之为父组件向子组件传递数据 (需要通过自定义子组件的属性完成)
    Vue.component("cdm-ol",{
        template: "<ol>\n" +
            "            <li v-for='d in listdata'>{{d}}</li>\n" +
            "        </ol>",
        props:["listdata"]  //自定义属性
    });

    //将当前子组件中红val的值传递给父组件使用，需要通过自定义事件完成
    Vue.component("cdm-input",{
        data(){
            return {
                val:""
            }
        },
        template:"<input type=\"text\" v-model='val'> ",
        watch:{
            val:function (newVal){
                //发出一个事件 (valchange 就是我们的自定义事件)
                this.$emit("valchange",newVal);
            }
        }
    });

    new Vue({
        el:"#app",
        data:{
            lis:["a1","a2","a3"],
            cdmInput:""
        },
        methods:{
            get(){
                alert(this.cdmInput)
            },
            valCha(val){
                this.cdmInput = val;
            }
        },
        watch:{

        },
        computed:{

        },
        //vue的入口函数，相当于js的onload 相当于jquery的 $(function(){})
        created(){
            alert("created")
        },
        mounted(){
            alert("mounted")
        }
    })
</script>
</html>